<template>
	<div class="schedule-container">
		<div class="header">
			起始日期:<!-- <span class="shijian" @click="qissj">2024-10-28</span> -->
			<picker mode="date" :value="startDateValue" :start="startDate" :end="endDate" @change="bindStartDateChange">
				<view class="uni-input">{{startDateValue}}</view>
			</picker>
			结束日期:<!-- <span class="shijian" @click="jiessj">2024-10-28</span> -->
			<picker mode="date" :value="endDateValue" :start="startDate" :end="endDate" @change="bindEndDateChange">
				<view class="uni-input">{{endDateValue}}</view>
			</picker>
		</div>
		<div class="date-buttons">
			<div class="date-button" @click="subtract">今日</div>
			<div class="date-button" @click="addOneDay">明日</div>
			<div class="search-button" @click="seek">搜索</div>
		</div>
		<div class="schedule">

			<div class="header-row">
				<div class="cell">时段</div>
				<div class="cell">预约情况</div>
				<div class="cell">取消</div>
				<div class="cell">查看</div>
			</div>
			<view v-for="data in datelist" :key="data.index">
				<div class="date-expired">
					<span v-if="data.date  != ''" class="dash">----------</span>
					<span class="dasj">{{data.date}}</span>
					<span v-if="data.date <getCurrentDate() " class="status">(已过期)</span>
					<span v-if="data.index  != ''" class="dash">----------</span>
				</div>
				<div v-for="list in data.tiem" :key="list.id" class="data-row">
					<div class="cell">{{list.time}}</div>
					<div :class="{ 'is-true': list.istrue == 1, 'is-false': list.istrue != 1 }"
						style="font-weight: bold;">
						{{ list.istrue == 1 ? '已预约' : '未预约' }}
					</div>
					<div class="cell">0</div>
					<div class="cell" @click="neirxq(list.id)">详情></div>
					<!-- <div class="cell" colspan="4">没有数据哦~</div> -->
				</div>
			</view>
		</div>
	</div>
</template>

<script setup>
	// 使用Composition API
	import {
		ref,
		computed,
		onMounted
	} from 'vue';
	import {
		gonavigateTo,
		getdate
	} from '@/request/wx.js';
	import {
		showorder,
		gettiem,
		showtiem
	} from "@/request/api.js"
	const currentDate = ref(new Date());
	// 起始日期的值
	const startDateValue = ref(getCurrentDate());
	console.log("开始时间" + startDateValue.value)
	// 结束日期的值
	const endDateValue = ref(getCurrentDate());
	console.log("结束时间" + endDateValue.value)

	const startDate = computed(() => getDate('start'));
	const endDate = computed(() => getDate('end'));
	let uid = uni.getStorageSync('uid');
	const datelist = ref([])
	//显示列表
	onMounted(async () => {
		const data = {
			'getdate': endDateValue.value,
			'setdate': startDateValue.value,
			'id': uid
		}
		show(data)
	})

	function bindStartDateChange(event) {
		const [year, month, day] = event.detail.value.split('-');
		startDateValue.value = event.detail.value;
		currentDate.value = new Date(year, month - 1, day);
	}

	function bindEndDateChange(event) {
		const [year, month, day] = event.detail.value.split('-');
		endDateValue.value = event.detail.value;
		currentDate.value = new Date(year, month - 1, day);
	}

	function getDate(type) {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	}

	function getCurrentDate() {
		const today = new Date();
		const year = today.getFullYear();
		const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，所以需要 +1
		const day = String(today.getDate()).padStart(2, '0');
		return `${year}-${month}-${day}`;
	}

	function formatDate(date) {
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	}

	// 新增的方法，用于给结束日期加一天查询明天的日期
	function addOneDay() {
		const date = new Date();
		date.setDate(date.getDate() + 1);
		endDateValue.value = formatDate(date);
		startDateValue.value = formatDate(date);
		const data = {
			'getdate': startDateValue.value,
			'setdate': startDateValue.value,
			'id': uid
		}
		show(data)
	}
	//查询今天
	function subtract() {
		const date = new Date();
		endDateValue.value = formatDate(date);
		startDateValue.value = formatDate(date);
		const data = {
			'getdate': endDateValue.value,
			'setdate': startDateValue.value,
			'id': uid
		}
		show(data)
	}
	//搜索
	async function seek() {
		const data = {
			'getdate': endDateValue.value,
			'setdate': startDateValue.value,
			'id': uid
		};
		show(data)
	}
	const neirxq = (id) => {
		console.log("内容详情");
		gonavigateTo(`/pages/home/index/minute?id=${id}`);
	};
	//显示列表
	async function show(data) {
		datelist.value = [{}]
		try {
			const req = await gettiem(data);
			const promises = req.data.data.map(item => {
				const data_tiem = {
					'id': item.id
				};
				return showtiem(data_tiem).then(req_tiem => {
					return {
						'date': getdate(item.date), // 确保 getdate 函数正确处理日期格式
						'tiem': req_tiem.data.data
					};
				});
			});
			const results = await Promise.all(promises);
			datelist.value = results;
			console.log("Updated datelist:", datelist.value);
		} catch (error) {
			console.error("Error fetching data:", error);
		}
	}
</script>
<style scoped>
	.is-true {
	  color: red; /* 已预约的颜色 */
	  border: 1px solid #ebebeb;
	  padding: 12px;
	  flex: 1;
	  text-align: center;
	  font-size: 14px;
	}
	
	.is-false {
	  color: #666;
	  border: 1px solid #ebebeb;
	  padding: 12px;
	  flex: 1;
	  text-align: center;
	  font-size: 14px;

	}
	.schedule-container {
		font-family: 'Arial', sans-serif;
		padding: 10px;
		background-color: #fff;
		border: 1px solid #ebebeb;
		border-radius: 4px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
	}

	.uni-input {
		border-bottom: 1px solid #b3b3b3;
	}

	.header span {
		font-size: 14px;
		color: #333;
	}

	.search-button,
	.date-button {
		padding: 5px 15px;
		border-radius: 4px;
		cursor: pointer;
		font-size: 14px;
		text-align: center;
		margin: 0 5px;
		user-select: none;
		/* 防止文本被选中 */
	}

	.date-button {
		background-color: #f2f2f2;
		color: #333;
		border: 1px solid #ddd;
		width: 60upx;
		height: 30upx;
		display: flex;
		/* 使用flex布局*/
		align-items: center;
		/* 垂直居中*/
		justify-content: center;
		/* 水平居中*/
		border-radius: 4px;
		cursor: pointer;
		font-size: 14px;
		user-select: none;
		/* 防止文本被选中 */
	}

	.search-button {
		background-color: #27aabf;
		color: #fff;
		border: none;
		width: 80upx;
		height: 30upx;
		display: flex;
		/* 使用flex布局*/
		align-items: center;
		/* 垂直居中*/
		justify-content: center;
		/* 水平居中*/
		border-radius: 4px;
		cursor: pointer;
		font-size: 14px;
		user-select: none;
		/* 防止文本被选中 */
	}

	.date-buttons {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 15upx;
	}

	.schedule {
		display: flex;
		flex-direction: column;
	}

	.header-row {
		display: flex;
		margin-bottom: 10px;
	}

	.data-row {
		display: flex;
	}

	.cell {
		border: 1px solid #ebebeb;
		padding: 12px;
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.header-row .cell {
		background-color: #f7f7f7;
		font-weight: bold;
	}

	.data-row .cell[colspan="4"] {
		border-left: none;
		border-right: none;
	}

	.shijian {
		color: #9e9e9e;
		/* 设置日期颜色，假设与图片中的一致 */
		margin-left: 5upx;
		/* 日期与文本之间的间距 */
		border-bottom: 1upx solid #9e9e9e;
		/* 添加下划线 */
	}

	.date-expired {
		font-family: Arial, sans-serif;
		/* 设置字体 */
		font-size: 30upx;
		/* 设置字体大小 */
		color: #333;
		/* 设置文本颜色 */
		text-align: center;
		/* 居中对齐 */
		margin: 12upx 0;
		/* 上下边距 */
	}

	.dash {
		color: #d0d0d0;
		/* 设置破折号颜色为浅灰色 */
		margin: 0 50upx;
		/* 破折号与字体之间的距离 */
	}

	.dasj {
		color: #9E9E9E;
		/* 日期颜色设置为红色，表示已过期 */
		margin: 0 10px;
		/* 日期与破折号之间的间距 */
	}

	.status {
		margin-left: -10upx;
		/* 状态与日期之间的间距 */
		color: #9E9E9E;
		/* 状态颜色设置为红色，与日期一致 */
		font-weight: normal;
		/* 状态字体不加粗 */
	}
</style>